<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .cc {
        color: red
    }

    .f {
        font-size: 12px;
    }

    .bd {
        border: 2px solid hotpink;
    }
</style>

<body>
    <div id="app">
        <!-- v-bind最终简写成冒号 -->
        <!-- 绑定一个类名的写法 加上v-bind后续只需要变更数据 那么视图层就会发生变化-->
        <h1 :class="classA">绑定一个类名</h1>
        <h1 :class="[classA,classB]">绑定多个类名</h1>
        <h1 :class="{cc:age>=10}">通过条件控制是否要加上某个类名</h1>
        <h2 :class="[classB,classC,{cc:age>=10}]">多个类名,有一些类名固定,cc这个类名由条件进行控制</h2>
        <!-- 绑定style 这种写法绑定的都是行内样式-->
        <h3 :style="styleA">动态绑定一个style</h3>
        <h3 :style="[styleA,styleB]">动态绑定多个style</h3>
        <img :src="imgSrc" alt="" width="300">
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    // 指令系统 vue的指令都会以前缀v-开头,后面跟上指令名字,指令能快捷实现一些功能
    // v-bind 能够给元素或者组件动态的绑定一个或者多个特性 (操作类名 操作样式 其它属性...)
    // 元素上的属性(自定义属性,或者dom本身的) 都可以通过v-bind进行绑定
    let vm = new Vue({
        el: "#app",
        data: {
            classA: "cc",
            classB: 'f',
            classC: 'bd',
            age: 10,
            styleA: {
                color: 'hotpink',
                border: "2px dashed #666"
            },
            styleB: {
                fontSize: '40px'
            },
            imgSrc:"https://img.zcool.cn/community/0167a75c0a2c23a801209252d0a271.jpg@1280w_1l_2o_100sh.jpg"
        }
    })
</script>